<template>
    <view class="container">
        <view class="box-top"></view>
        <view class="box">
            <view class="user-card">
                <view class="user-info">
                    <!-- 头像区域 -->
                    <view class="avatar-container" @click="uploading">
                        <image :src="user.cover ? user.cover[0] : '/static/images/avatar-placeholder.png'"
                            class="avatar" mode="aspectFill"></image>
                        <view class="camera-icon"></view>
                    </view>
                    <!-- 用户详情 -->
                    <view class="details">
                        <h2 class="username" @click="!isLoggedIn && login">
                            {{ isLoggedIn ? user.name : '未登录，请先登录' }}
                        </h2>
                        <text v-if="isLoggedIn" class="description">{{ user.career || '职业未填写' }}</text>
                        <p v-if="isLoggedIn" class="user-id">ID: {{ user.userId }}</p>
                    </view>
                    <!-- 编辑按钮 -->
                    <button class="edit-button" v-if="isLoggedIn" @click="redact">编辑</button>
                </view>
            </view>

            <view class="elite-card">
                <view class="card-header">
                    <image src="/static/images/crown.png" class="crown-icon" />
                    <text class="title">月娘高端·精英·专区</text>
                    <image src="/static/images/hearts.png" class="hearts-icon" />
                </view>
                <text class="description">
                    汇聚众多高知、海归、名企精英等优质会员脱单专区<br />
                    全程1v1为你的爱情保驾护航，更快找到和你一样优秀的TA
                </text>
                <view class="features">
                    <view class="feature-item">
                        <span class="feature-icon iconfont icon-renzheng"></span>
                        <text>多重认证</text>
                    </view>
                    <view class="feature-item">
                        <span class="feature-icon iconfont icon-renzheng"></span>
                        <text>真实可靠</text>
                    </view>
                    <view class="feature-item">
                        <span class="feature-icon iconfont icon-renzheng"></span>
                        <text>同城精选</text>
                    </view>
                </view>
                <!-- <button class="view-more-btn">查看精英专区</button> -->
            </view>

            <view class="menu">
                <view class="menu-item" v-for="(item, index) in menuItems" :key="item.title" @click="btn(item)">
                    <view class="icon-svg">
                        <!-- 我的点赞 - 现代爱心图标 -->
                        <view v-if="item.type === 1" class="modern-heart">
                            <view class="heart-body"></view>
                            <view class="heart-pulse"></view>
                        </view>
                        <!-- 我的收藏 - 现代星星图标 -->
                        <view v-else-if="item.type === 2" class="modern-star">
                            <view class="star-body"></view>
                            <view class="star-sparkle"></view>
                        </view>
                        <!-- 心动了我 - 现代闪电图标 -->
                        <view v-else class="modern-lightning">
                            <view class="lightning-body"></view>
                            <view class="lightning-flash"></view>
                        </view>
                    </view>
                    <text class="menu-text">{{ item.title }}</text>
                </view>
            </view>
        </view>
        <!-- 底部导航 -->
        <BottomNav currentPage="my" />
    </view>
</template>

<script>
    import BottomNav from "./../components/BottomNav.vue";
    export default {
        components: {
            BottomNav,
        },
        data() {
            return {
                user: {
                    name: '',
                    career: '',
                    cover: null,
                    userId: null,
                },
                isLoggedIn: false,
                menuItems: [
                    { title: "我的点赞",icon: "iconfont icon-xindong1",page: 'likes', type: 1 },
                    { title: "我的收藏",icon: "iconfont icon-aixin",page: 'favorites', type: 2 },
                    { title: "心动了我",icon: "iconfont icon-xindong",page: 'heartbeat' },
                    // { title: "认证中心",icon: "iconfont icon-renzheng",page: 'myProfile' },
                    // { title: "系统消息",icon: "iconfont icon-xiaoxi1",page: 'news' },
                    // { title: "我的动态",icon: "iconfont icon-dongtai",page: 'dynamic' },
                    // { title: "我的活动",icon: "iconfont icon-huodong",page: 'activity' },
                    // { title: "我的订单",icon: "iconfont icon-dingdan",page: 'orderForm' },
                    // { title: "设置",icon: "iconfont icon-shezhi",page: 'set' },
                ],
            };
        },
        onShow() {
            this.loadUser();
        },
        methods: {
            loadUser() {
                const userData = this.f.storage('user_data');
                if (userData && userData.userId) {
                    this.isLoggedIn = true;
                    this.$api.req(
                        '/dating/member/get',
                        { userId: userData.userId },
                        'get',
                        'JSON',
                        false
                    ).then((res) => {
                        if (res.code === 0) {
                            this.user = res.data;
                        }
                    });
                } else {
                    this.isLoggedIn = false;
                }
            },
            redact() {
                uni.navigateTo({
                    // url: '/subPackage1/myProfile/myProfile',
                    url: '/subPackage1/basics/basics',

                });
            },
            login() {
                uni.navigateTo({
                    url: '/subPackage1/phoneLogin/phoneLogin',
                });
            },
            uploading() {
                if (!this.isLoggedIn) {
                    this.f.nav('/pages/login/login1');
                }
                return
                uni.chooseImage({
                    count: 1,
                    sizeType: ['original','compressed'],
                    sourceType: ['album'],
                    success: (res) => {
                        const filePath = res.tempFilePaths[0];
                        this.uploadImage(filePath);
                    },
                });
            },
            btn(item) {
                console.log('点击菜单项:', item);
                
                // 如果是点赞或收藏，跳转到对应的页面并传递类型参数
                if (item.type) {
                    console.log('检测到type参数:', item.type);
                    if (item.type === 1) {
                        // 点赞 - 跳转到最近来访页面，传递type=1参数
                        console.log('跳转到点赞页面');
                        uni.navigateTo({
                            url: `/subPackage1/recently/recently?type=1&title=${encodeURIComponent(item.title)}`,
                            success: () => {
                                console.log('跳转成功');
                            },
                            fail: (err) => {
                                console.error('跳转失败:', err);
                            }
                        });
                    } else if (item.type === 2) {
                        // 收藏 - 跳转到我的动态页面，传递type=2参数
                        console.log('跳转到收藏页面');
                        uni.navigateTo({
                            url: `/subPackage1/dynamic/dynamic?type=2&title=${encodeURIComponent(item.title)}`,
                            success: () => {
                                console.log('跳转成功');
                            },
                            fail: (err) => {
                                console.error('跳转失败:', err);
                            }
                        });
                    }
                } else {
                    console.log('跳转到普通页面:', item.page);
                    uni.navigateTo({
                        url: `/subPackage1/${item.page}/${item.page}`,
                        success: () => {
                            console.log('跳转成功');
                        },
                        fail: (err) => {
                            console.error('跳转失败:', err);
                        }
                    });
                }
            },
        },
    };
</script>

<style lang="scss" scoped>
    .container {
        width: 100vw;
        height: 100%;
        /* background-color: #f9f9f9; */
    }

    .box {
        width: 95%;
        height: 100vh;
        margin: 0 auto;
        position: relative;
    }

    .box-top {
        width: 100vw;
        height: 120px;
        position: absolute;
        background: linear-gradient(to right, #e3f2ff, #f3eaff);
    }



    .user-card {
        width: 100%;
        border-radius: 20rpx;
        padding-top: 40rpx;
        /* padding-bottom: 100px; */
    }

    .user-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }

    .avatar-container {
        position: relative;
        width: 120rpx;
        height: 120rpx;
    }

    .avatar {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 4rpx solid #fff;
    }

    .camera-icon {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 40rpx;
        height: 40rpx;
        background: #8a56ff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
    }

    .details {
        flex: 1;
        margin-left: 20rpx;
    }

    .username {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
    }

    .description {
        margin-top: 10rpx;
        font-size: 28rpx;
        color: #666;
    }

    .user-id {
        margin-top: 10rpx;
        font-size: 24rpx;
        color: #999;
    }

    .edit-button {
        padding: 10rpx 20rpx;
        border: 1rpx solid #8a56ff;
        border-radius: 20rpx;
        background: none;
        color: #8a56ff;
        font-size: 26rpx;
    }








    .elite-card {
        background: linear-gradient(to right, #f3eaff, #e3f2ff);
        padding: 20rpx;
        border-radius: 20rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
        text-align: center;
        margin: 30px 0 0 0;
    }

    .card-header {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20rpx;
    }

    .crown-icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
    }

    .title {
        font-size: 32rpx;
        font-weight: bold;
        color: #5c67ff;
    }

    .hearts-icon {
        width: 50rpx;
        height: 50rpx;
        margin-left: 10rpx;
    }

    .description {
        font-size: 26rpx;
        color: #666;
        line-height: 36rpx;
        margin: 10rpx 0;
    }

    .features {
        display: flex;
        justify-content: space-around;
        margin: 20rpx 0;
    }

    .feature-item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .feature-icon {
        width: 50rpx;
        height: 50rpx;
        font-size: 25px;
        margin-bottom: 10rpx;
    }

    .feature-item text {
        font-size: 24rpx;
        color: #333;
    }

    .view-more-btn {
        padding: 12rpx 20rpx;
        background-color: #a55fee;
        color: #fff;
        font-size: 26rpx;
        border-radius: 20rpx;
        border: none;
        outline: none;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
    }






    .menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        background-color: #fff;
        padding: 30rpx 20rpx;
        margin-top: 20rpx;
        border-radius: 20rpx;
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
    }

    .menu-item {
        width: 30%;
        min-height: 120rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 20rpx;
        padding: 20rpx 10rpx;
        border-radius: 16rpx;
        transition: all 0.3s ease;
        background: linear-gradient(135deg, #f8f9fa, #ffffff);
    }

    .menu-item:active {
        transform: scale(0.95);
        background: linear-gradient(135deg, #e9ecef, #f8f9fa);
    }

    .icon-svg {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        position: relative;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.8);
    }

    .icon-svg:hover {
        transform: scale(1.1);
    }

    /* 现代爱心图标 - 我的点赞 */
    .modern-heart {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .heart-body {
        width: 32rpx;
        height: 28rpx;
        background: linear-gradient(135deg, #ff4757, #ff6b7a);
        position: relative;
        transform: rotate(-45deg);
        border-radius: 16rpx 16rpx 0 0;
        box-shadow: 0 6rpx 20rpx rgba(255, 71, 87, 0.4);
    }

    .heart-body:before,
    .heart-body:after {
        content: '';
        width: 32rpx;
        height: 28rpx;
        position: absolute;
        left: 0;
        top: 0;
        background: linear-gradient(135deg, #ff4757, #ff6b7a);
        border-radius: 16rpx 16rpx 0 0;
        transform: rotate(-90deg);
        transform-origin: 0 100%;
        box-shadow: 0 6rpx 20rpx rgba(255, 71, 87, 0.4);
    }

    .heart-body:after {
        left: 16rpx;
        transform: rotate(90deg);
        transform-origin: 100% 100%;
    }

    .heart-pulse {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8rpx;
        height: 8rpx;
        background: white;
        border-radius: 50%;
        animation: heartPulse 2s ease-in-out infinite;
        z-index: 2;
    }

    @keyframes heartPulse {
        0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
        50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.7; }
    }

    /* 现代星星图标 - 我的收藏 */
    .modern-star {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .star-body {
        width: 36rpx;
        height: 36rpx;
        background: linear-gradient(135deg, #ffa726, #ffb74d);
        position: relative;
        transform: rotate(45deg);
        border-radius: 50%;
        box-shadow: 0 6rpx 20rpx rgba(255, 167, 38, 0.4);
    }

    .star-body:before,
    .star-body:after {
        content: '';
        position: absolute;
        background: linear-gradient(135deg, #ffa726, #ffb74d);
        width: 36rpx;
        height: 36rpx;
        border-radius: 50%;
        box-shadow: 0 6rpx 20rpx rgba(255, 167, 38, 0.4);
    }

    .star-body:before {
        transform: rotate(30deg);
        transform-origin: 0 0;
    }

    .star-body:after {
        transform: rotate(-30deg);
        transform-origin: 0 0;
    }

    .star-sparkle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 6rpx;
        height: 6rpx;
        background: white;
        border-radius: 50%;
        animation: starSparkle 1.5s ease-in-out infinite;
        z-index: 2;
    }

    .star-sparkle:before,
    .star-sparkle:after {
        content: '';
        position: absolute;
        width: 4rpx;
        height: 4rpx;
        background: white;
        border-radius: 50%;
        animation: starSparkle 1.5s ease-in-out infinite;
    }

    .star-sparkle:before {
        top: -8rpx;
        left: -8rpx;
        animation-delay: 0.3s;
    }

    .star-sparkle:after {
        bottom: -8rpx;
        right: -8rpx;
        animation-delay: 0.6s;
    }

    @keyframes starSparkle {
        0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
        50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.6; }
    }

    /* 现代闪电图标 - 心动了我 */
    .modern-lightning {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .lightning-body {
        width: 28rpx;
        height: 40rpx;
        background: linear-gradient(135deg, #9c27b0, #ba68c8);
        position: relative;
        transform: rotate(15deg);
        border-radius: 4rpx;
        box-shadow: 0 6rpx 20rpx rgba(156, 39, 176, 0.4);
    }

    .lightning-body:before {
        content: '';
        position: absolute;
        top: -8rpx;
        left: 8rpx;
        width: 12rpx;
        height: 16rpx;
        background: linear-gradient(135deg, #9c27b0, #ba68c8);
        transform: rotate(-30deg);
        border-radius: 2rpx;
        box-shadow: 0 6rpx 20rpx rgba(156, 39, 176, 0.4);
    }

    .lightning-body:after {
        content: '';
        position: absolute;
        bottom: -8rpx;
        right: 8rpx;
        width: 12rpx;
        height: 16rpx;
        background: linear-gradient(135deg, #9c27b0, #ba68c8);
        transform: rotate(30deg);
        border-radius: 2rpx;
        box-shadow: 0 6rpx 20rpx rgba(156, 39, 176, 0.4);
    }

    .lightning-flash {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 4rpx;
        height: 20rpx;
        background: white;
        border-radius: 2rpx;
        animation: lightningFlash 1.2s ease-in-out infinite;
        z-index: 2;
    }

    .lightning-flash:before,
    .lightning-flash:after {
        content: '';
        position: absolute;
        background: white;
        border-radius: 2rpx;
        animation: lightningFlash 1.2s ease-in-out infinite;
    }

    .lightning-flash:before {
        width: 3rpx;
        height: 12rpx;
        top: -6rpx;
        left: -2rpx;
        transform: rotate(30deg);
        animation-delay: 0.2s;
    }

    .lightning-flash:after {
        width: 3rpx;
        height: 12rpx;
        bottom: -6rpx;
        right: -2rpx;
        transform: rotate(-30deg);
        animation-delay: 0.4s;
    }

    @keyframes lightningFlash {
        0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
        50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
    }

    .menu-text {
        font-size: 26rpx;
        color: #2c3e50;
        text-align: center;
        margin-top: 12rpx;
        font-weight: 600;
        transition: color 0.3s ease;
    }

    .menu-item:hover .menu-text {
        color: #a55fee;
    }
</style>